<%@ page import="java.util.ArrayList" %>
<%@ page import="com.xiaoyu.pojo.Person" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="static/css/AjaxSearch.css">
    <script type="text/javascript">
        function AjaxSearch() {
            var request = new XMLHttpRequest();

            var input = document.getElementsByName("input")[0].value;
            request.open("get","AjaxSearchPerson?input="+input,true);
            request.send();

            request.onreadystatechange = function () {
                if(request.readyState == 4){
                    if(request.status == 200||request.status == 304){
                        var result = request.responseText;
                        var json = eval("(" + result + ")");
                        var table = document.getElementById("table");
                        table.innerHTML="<tr><th>name</th><th>sex</th><th>age</th><th>phone</th></tr>";
                        for (let i = 0; i < json.length; i++) {
                            var trNode = document.createElement("tr");

                            var thNameNode =document.createElement("th");
                            thNameNode.innerHTML=json[i].name;
                            trNode.appendChild(thNameNode);

                            var thSexNode =document.createElement("th");
                            thSexNode.innerHTML=json[i].sex;
                            trNode.appendChild(thSexNode);

                            var thAgeNode =document.createElement("th");
                            thAgeNode.innerHTML=json[i].age;
                            trNode.appendChild(thAgeNode);

                            var thPhoneNode =document.createElement("th");
                            thPhoneNode.innerHTML=json[i].phone;
                            trNode.appendChild(thPhoneNode);

                            table.appendChild(trNode);
                        }
                    }
                };
            };
        }
    </script>
</head>
<body>
<div class="container">
    <div class="clearfix searchHead">
        <div class="left">
            <input type="text" placeholder="请输入" name="input">
            <input type="submit" onclick="AjaxSearch()">
        </div>
        <div class="right">
            <a href="page.jsp"><button>返回</button></a>
        </div>
    </div>
    <div class="table">
        <table id="table">
            <tr>
                <th>name</th>
                <th>sex</th>
                <th>age</th>
                <th>phone</th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
